//科学使用时长
const myChart_option1 = function(data) {
  return {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        crossStyle: {
          color: "white"
        }
      }
    },
    textStyle: {
      color: "#a0a8b9"
    },
    grid: {
      left: "8%",
      bottom: "16%",
      right:'2%',
      top:'15%'
    }, 
    xAxis: [
      {
        type: "category",
        name: "",
        data: ["政治", "语文", "数学", "思想课", "地理", "化学", "物理", "生物", "自然", "体育", "美术", "音乐"],
        axisPointer: {
          type: "shadow"
        },
        axisLabel: {
          formatter: "{value}"
        }
      }
    ],
    yAxis: [
      {
        type: "value",
        name: "时",
        min: 0,
        max: 250,
        interval: 50,
        axisLabel: {
          formatter: "{value}"
        },
        splitLine:{
          lineStyle:{
            color:'#242847'
          }
        }
      },
      
    ],
    series: [
      {
        name: "时长",
        type: "bar",
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "#0182e8"
            },
            {
              offset: 1,
              color: "#021b4d"
            }
          ]),
          barBorderRadius: 5
        },
        barWidth: "10px",
        data: [146, 130, 106, 180, 107, 160, 150, 140, 160, 170, 180, 190]
      },
      
    ]
  };
};

// 年级占比
const myChart_option2 = function(data) {
  return {
    tooltip: {
      trigger: 'item',
      formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    graphic:{
      type: 'text',
      left: 'center', // 相对父元素居中
      top: 'middle',  // 相对父元素居中
      style: {
          fill: 'white',
          text: 1254,
          fontSize: '28',        
      }
    },
    series: [
      {
        name: "",
        type: "pie",
        hoverAnimation: true,
        radius: ["50%", "70%"],
        avoidLabelOverlap: false,
        label: {
          formatter: "{a|{d}%}\n{b|{b}}",
          show: true,
          position: "outside",
          color: "#0153fd",
          verticalAlign: "top",
          rich: {
            a: {
              color: "white",
              lineHeight: 22,
              align: "center",
              fontSize: 15
            },
            b: {
              fontSize: 15,
              color: "#0153fd"
            }
          }
        },
        emphasis: {
          label: {
            rich: {
              a: {
                color: "white",
                lineHeight: 22,
                align: "center",
                fontSize: 15
              },
              b: {
                color: "#16adfc",
                fontSize: 15
              }
            }
          }
        },
        labelLine: {
          show: true,
          length: 20,
          length2: 50,
          lineStyle: {
            color: "#0054ff"
          },
          emphasis: {
            lineStyle: {
              color: "#22d3fd"
            }
          }
        },
        data: [
          {
            value: 28,
            name: "一年级",
            itemStyle:{
              color:'#1bb2f9'
            }           
          },
          { value: 22, name: "二年级",
            itemStyle:{
              color:'#23548c'
            }  
          },
          { value: 50, name: "三年级",
            itemStyle:{
              color:'#172959'
            } 
          },
         
        ]
      }
    ]
  };
};

//map
const myChart_option3 = function(data) {
  var geoCoordMap = {
    黄浦区: [121.490317, 31.222771],
    徐汇区: [121.43752, 31.179973],
    长宁区: [121.4222, 31.218123],
    静安区: [121.448224, 31.229003],
    普陀区: [121.392499, 31.241701],
    闸北区: [121.465689, 31.25318],
    虹口区: [121.491832, 31.26097],
    杨浦区: [121.522797, 31.270755],
    闵行区: [121.375972, 31.111658],
    宝山区: [121.489934, 31.398896],
    嘉定区: [121.250333, 31.383524],
    浦东新区: [121.567706, 31.245944],
    金山区: [121.330736, 30.724697],
    松江区: [121.223543, 31.03047],
    青浦区: [121.113021, 31.151209],
    奉贤区: [121.458472, 30.912345],
    崇明县: [121.397516, 31.626946]
  };
  var data = [
    {
      name: "黄浦区",
      value:{
        equipCnt: 9000, //装备数量
        onLine: 890, //当前在线
        onLineRate: 98, //在线率
        time: 33, //使用时长（时）
        useRate: 56, //使用率
        warnRate: 1 //今日报警装备占比
      }
    }
  ];

  var convertData = function(data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
      var geoCoord = geoCoordMap[data[i].name];
      if (geoCoord) {
        res.push({
          name: data[i].name,
          value: geoCoord.concat(data[i].value)
        });
      }
    }
    return res;
  };

  return {
    tooltip: {
      trigger: "item",
      formatter: function(params, ticket, callback) {
        //根据业务自己拓展要显示的内容
        var name = params.name;
        var value = params.value;
        var res = ` <p style="color:#81fffe">${name}</p>
                    <p>装备数量 : ${value[2].equipCnt}</p>
                    <p>当前在线 : ${value[2].onLine}</p>
                    <p>在线率 : ${value[2].onLineRate}</p>
                    <p>使用时长（时） : ${value[2].time}</p>
                    <p>使用率 : ${value[2].useRate}</p>
                    <p>今日警告装备占比 : ${value[2].warnRate}</p>
                  `;
        return res;
      }
    },
    // visualMap: {
    //   min: 800,
    //   max: 50000,
    //   text:['High','Low'],
    //   realtime: false,
    //   calculable: true,
    //   inRange: {
    //       color: ['lightskyblue','yellow', 'orangered']
    //   }
    // },

    geo: {
      map: "shanghai",
      label: {
        emphasis: {
          show: false
        }
      },
      roam: false, //是否允许缩放
      layoutCenter: ["50%", "50%"], //地图位置
      itemStyle: {
        normal: {
          areaColor: "#021561",
          borderColor: "#06d1fc"
        },
        emphasis: {
          color: "#248ce1" //悬浮背景
        }
      }
    },
    series: [
      {
        name: "设备情况",
        type: "effectScatter",
        coordinateSystem: "geo",
        data: convertData(data),
        // symbolSize: function(val) {
        //   return val[2] / 30;
        // },
        showEffectOn: "render",
        rippleEffect: {
          brushType: "stroke"
        },
        hoverAnimation: true,
        label: {
          normal: {
            formatter: "{b}",
            position: "right",
            show: true
          }
        },
        itemStyle: {
          normal: {
            color: "#eac736",
            shadowBlur: 10,
            shadowColor: "#05C3F9"
          }
        },
        zlevel: 1
      }
    ]
  };
};
const myChart_option8 = function(data){
  return {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        crossStyle: {
          color: "white"
        }
      }
    },
    textStyle: {
      color: "#7bd3f9",
    },
    grid: {
      left: "20%",
      bottom: "8%",
      right:'12%',
      top:'20%'
    }, 
    yAxis: [
      {
        type: "category",
        name: "",
        data: ['浙江',"杭州", "嘉兴", "苏州"],
        axisPointer: {
          type: "shadow"
        },
        axisLabel: {
          formatter: "{value}"
        },
        axisLine:{
          lineStyle:{
            color:'#265aa5',
          }
        }
      }
    ],
    xAxis: [
      {
        type: "value",
        name: "",
        min: 0,
        max: 250,
        interval: 50,
        axisLabel: {
          formatter: "{value}"
        },
        splitLine:{
          lineStyle:{
            color:'#2656a2'
          }
        },
        axisLine:{
          lineStyle:{
            color:'#265aa5',
          }
        }
      },
      
    ],
    series: [
      {
        name: "",
        type: "bar",
        itemStyle: {
          color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
            {
              offset: 0,
              color: "#1bd2fc"
            },
            {
              offset: 1,
              color: "#1465fc"
            }
          ]),
        },
        barWidth: "10px",
        data: [{
          value:200,
          itemStyle:{
            color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
              {
                offset: 0,
                color: "#f7681c"
              },
              {
                offset: 1,
                color: "#fd3d3c"
              }
            ]),
          }
        },{
          value:180,
          itemStyle:{
            color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
              {
                offset: 0,
                color: "#f7e81d"
              },
              {
                offset: 1,
                color: "#fdca3b"
              }
            ]),
          }
        },{
          value:170,
          itemStyle:{
            color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
              {
                offset: 0,
                color: "#0cda78"
              },
              {
                offset: 1,
                color: "#34b94c"
              }
            ]),
          }
        },{
          value:160,
          
        }]
      },
      
    ]
  };
}



//近30天装备使用情况
const myChart_option4 = function(data) {
  return {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        crossStyle: {
          color: "white"
        }
      }
    },
    textStyle: {
      color: "#a0a8b9"
    },
    grid: {
      left: "8%",
      bottom: "16%"
    },
    legend: {
      data: [ "终端主机", "班班通", "使用时长"],
      textStyle: {
        color: "#929aad"
      },
      right: "2%",
      top: "0%"
    },
    xAxis: [
      {
        type: "category",
        name: "",
        data: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
        axisPointer: {
          type: "shadow"
        },
        axisLabel: {
          formatter: "{value}day"
        }
      }
    ],
    yAxis: [
      {
        type: "value",
        name: "使用时长",       
        axisLabel: {
          formatter: "{value}"
        },
        splitLine:{
          lineStyle:{
            color:'#011d71'
          }
        }
      },
      {
        type: "value",
        name: "使用率",
        min: 0,
        max: 100,
        interval: 20,
        axisLabel: {
          formatter: "{value}%"
        },
        splitLine:{
          lineStyle:{
            color:'#011d71'
          }
        }
      }
    ],
    dataZoom: [
      {
        show: true,
        height: 8,
        width:'50%',
        xAxisIndex: [0],
        bottom: 5,
        left:'center',
        start: 0,
        end: 50,
        fillerColor:'#197ec2',
        dataBackground:{
          areaStyle:{
            color:'#0a1130',
           
          }
        },
        handleStyle:{
          color: "transparent",
          
        },
        textStyle: {
          color: "#7c82a6"
        },
        borderColor: "#182a6c",
      },
      {
        type: "inside",
        show: true,
        height: 15,
        start: 1,
        end: 35
      }
    ],
    series: [
      {
        name:'班班通',
        type:'line',
        itemStyle:{
          color:'#1cc840',
        },
        data:[11, 12, 13, 14, 15, 16, 17,18, 19, 20, 21, 22]
      },
      {
        name:'终端主机',
        type:'line',
        itemStyle:{
          color:'#fea026',
        },
        data:[22, 23, 23, 24, 25, 26, 27,28, 29, 30, 31, 32]
      },
      
      {
        name:'使用时长',
        type:'bar',
        barWidth : 10,
        itemStyle:{
          color:'#0290fc',
        },
        data:[10, 58, 21, 12, 14, 38, 12,10, 54, 78, 32, 87]
      },
    ]
  };
};


//近一小时班班通各时段使用情况
const myChart_option5 = function(data) {
  return {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        crossStyle: {
          color: "white"
        }
      }
    },
    legend: {
      data: ["使用数", "严重警告", "一般警告"],
      textStyle: {
        color: "#929aad"
      },
      right: "2%",
      top: "0%"
    },
    textStyle: {
      color: "#a0a8b9"
    },
    grid: {
      left: "8%",
      bottom: "16%",
      right:'2%',
      top:'15%'
    }, 
    xAxis: [
      {
        type: "category",
        name: "",
        data: ["8:00", "9:00", "10:00", "11:00", "12:00", "13:00", "14:00", "15:00", "16:00", "17:00", "18:00", "19:00"],
        axisPointer: {
          type: "shadow"
        },
        axisLabel: {
          formatter: "{value}"
        }
      }
    ],
    yAxis: [
      {
        type: "value",
        name: "",
        min: 0,
        max: 250,
        interval: 50,
        axisLabel: {
          formatter: "{value}"
        },
        splitLine:{
          lineStyle:{
            color:'#243f88'
          }
        }
      },
      
    ],
    dataZoom: [
      {
        show: true,
        height: 8,
        width:'50%',
        xAxisIndex: [0],
        bottom: 5,
        left:'center',
        start: 0,
        end: 50,
        fillerColor:'#197ec2',
        dataBackground:{
          areaStyle:{
            color:'#0a1130',
           
          }
        },
        handleStyle:{
          color: "transparent",
          
        },
        textStyle: {
          color: "#7c82a6"
        },
        borderColor: "#182a6c",
      },
      {
        type: "inside",
        show: true,
        height: 15,
        start: 1,
        end: 35
      }
    ],
    series: [
      {
        name: "使用数",
        type: "line",
        itemStyle: {
          color: "#43bbfb"
        },
        smooth: true,
        data: [146, 130, 106, 180, 107, 160, 150, 140, 160, 170, 180, 190]
      },
      {
        name: "严重警告",
        type: "line",
        itemStyle: {
          color: "#eb5690"
        },
        smooth: true,
        data: [1, 2, 3, 4, 15, 23, 98, 76, 54, 43, 32, 21]
      },
      {
        name: "一般警告",
        type: "line",
        itemStyle: {
          color: "#fe9c43"
        },
        smooth: true,
        data: [76, 65, 54, 43, 12, 90, 56, 32, 54, 4, 21, 54]
      },
    ]
  };
};

//告警程度以及类别分布
const myChart_option6 = function(data) {
  return {
    tooltip: {
      trigger: 'item',
      formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    graphic:{
      type: 'text',
      left: 'center', // 相对父元素居中
      top: 'middle',  // 相对父元素居中
      style: {
          fill: 'white',
          text: 141,
          fontSize: '28',        
      }
    },
    
    series: [
      {
        name:'警告程度',
        type:'pie',
        selectedMode: 'single',
        radius: [0, '30%'],

        label: {
            normal: {
                position: 'inner'
            }
        },
        labelLine: {
            normal: {
                show: false
            }
        },
        data:[
            {value:45, name:'严重',itemStyle:{
              color:'#992cb6'
            } },
            {value:87, name:'一般',itemStyle:{
              color:'#1e54b9'
            } },
        ]
      },
      {
        name: "警告类别",
        type: "pie",
        hoverAnimation: true,
        radius: ["50%", "70%"],
        avoidLabelOverlap: false,
        label: {
          formatter: "{a|{d}%}\n{b|{b}}",
          show: true,
          position: "outside",
          color: "#0153fd",
          verticalAlign: "top",
          rich: {
            a: {
              color: "white",
              lineHeight: 22,
              align: "center",
              fontSize: 15
            },
            b: {
              fontSize: 15,
              color: "#0153fd"
            }
          }
        },
        emphasis: {
          label: {
            rich: {
              a: {
                color: "white",
                lineHeight: 22,
                align: "center",
                fontSize: 15
              },
              b: {
                color: "#16adfc",
                fontSize: 15
              }
            }
          }
        },
        labelLine: {
          show: true,
          length: 20,
          length2: 50,
          lineStyle: {
            color: "#0054ff"
          },
          emphasis: {
            lineStyle: {
              color: "#22d3fd"
            }
          }
        },
        data: [
          {
            value: 22,
            name: "投影仪",
            itemStyle:{
              color:'#9771ff'
            }           
          },
          { value: 28, name: "CPU过高",
            itemStyle:{
              color:'#26c4fd'
            }  
          },
          { value: 22, name: "主机失灵",
            itemStyle:{
              color:'#15dce6'
            } 
          },
          { value: 18, name: "麦克风丢失",
            itemStyle:{
              color:'#10dd94'
            } 
          },
          { value: 10, name: "吊麦丢失",
            itemStyle:{
              color:'#f6bb64'
            } 
          }
        ]
      }
    ]
  };
};

//使用情况
const myChart_option7 = function(data) {
  return {
    tooltip: {},   
    radar: [
        {
            indicator: [
                { text: '班班通',max:100 },
                { text: '在线课堂终端' ,max:100},
                { text: '大屏一体机',max:100 },
                { text: '终端主机' ,max:100},
            ],                      
            startAngle: 45,
            splitNumber: 4,
            shape: 'circle',
            name: {
                formatter:'{value}',
                textStyle: {
                    color:'#1ab1ef'
                }
            },
            splitArea: {
                show:true,
                areaStyle: {
                    color: ['#051d64','#041d64', '#03185f','#021358'],
                    shadowColor: '#0f3ba8',
                    shadowBlur: 10
                }
            },
            axisLine: {
                lineStyle: {
                    color: '#2c8ebe',
                    type:'dashed'
                }
            },
            splitLine: {
                lineStyle: {
                    color: 'transparent'
                }
            }
        },
        
    ],
    series: [
        {
            name: '服务分布',
            type: 'radar',
            itemStyle: {
              color:'#1f9cf5',
            },
            label: {
              normal: {
                  show: true,
                  color:'white',
              }
            },
            areaStyle: {
              normal: {
                  opacity: 0.7,
                  color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
                      {
                          color: '#093574',
                          offset: 0
                      },
                      {
                          color: '#093574',
                          offset: 1
                      }
                  ])
              }
            },
            data: [
                {
                    value: [21, 31, 25, 34],
                                    
                }
            ]
        },
        
    ]
  }
};
